<template>
	<div id="Item">
		<Banner title="数据分析系统" />

		<div class="container">
			<div class="area_Divide">
				<div class="area_Left">
					<div class="button1">
						实时数据
						<!-- <div class="bacak"></div> -->
					</div>
					<HighCharts />
				</div>
				<div class="area_Right">
					<div class="button" @click="handleRealTimeHome()">
						上一级
						<!-- <div class="bacak"></div> -->
					</div>
					<LtableItem title="井号数据" />
					<MtableItem title="实时数据统计" data1="12" data2="4601" data3="11" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Banner from "../components/home/Banner.vue";
	import HighCharts from "../components/item/Highcharts.vue";
	import MtableItem from "../components/item/MtableItem.vue";
	import LtableItem from "../components/item/LtableItem.vue";

	export default {
		name: "Item",
		components: {
			Banner,
			MtableItem,
			LtableItem,
			HighCharts
		},
		data() {
			return {
				wellName: ""
			};
		},
		methods: {
			handleRealTimeHome(val) {
				this.$router.replace("/RealTimeHome");
				// sessionStorage.clear("wellName");
			}
		},
		mounted() {
			this.wellName = sessionStorage.getItem("wellName");
			console.log(this.wellName);
		}
	};
</script>

<style scoped lang="less">
	.container {
		position: relative;
		display: flex;
		width: 100%;
		height: 80%;
		padding: 0 2%;
		box-sizing: border-box;
	}

	.button1 {
		width: 4.5%;
		height: 4%;
		background-image: url("../assets/btn_leibie_pressed@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 1%;
		// right: 3%;
		left: 12%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}
	
	.Hidden {
		z-index: 2;
		height: 0;
		position: relative;
	}

	.HiddenTable {
		position: absolute;
		transform: translate(-10px, 67px);
	}

	.area_Right {
		/* margin-top: 5px; */
		height: 100%;
		/* 4.63rem; */
		width: 70%;
		position: relative;
	}

	.area_Divide {
		position: relative;
		display: flex;
		width: 100%;
		height: 100%;
	}

	.area_Right {
		/* margin-top: 5px; */
		height: 100%;
		/* 4.63rem; */
		width: 70%;
	}

	.area_Left {
		height: 100%;
		width: 28%;
		background-image: url("../assets/bg2@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 1%;
		box-sizing: border-box;
	}

	.button {
		width: 5%;
		height: 5%;
		background-image: url("../assets/btn_leibie_pressed@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: -7%;
		// right: 3%;
		left: -40%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.bacak {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		font-size: 8px;
		transform: translate(33px, -17px);
		height: 0.7rem;
		width: 1.3rem;
		// background-color: red;
		margin-top: 0.8%;
		background-image: url("../assets/btn_leibie_pressed.png");
		background-size: 100% 100%;
	}

	body {
		margin: 0;
		padding: 0;
		color: rgb(255, 255, 255);
		background-color: rgb(0, 16, 47);
	}

	#Item {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		width: 100%;
		height: 100%;
		position: relative;
		/* background-color: rgb(0, 16, 47); */
	}
</style>
